import React, { Component } from 'react'

class Child extends Component {
  // 挂载时
  // 它只会执行1次
  // 子类中如果要定义了构造函数，则一定要执行一下父类构造函数方法，不然会丢失父类中构造函数中初始化的操作
  // 初始化数据，不建议此处去异步远程去获取数据更新状态
  constructor(props) {
    super(props)
    this.state = {}
    console.log('Child -- constructor')
  }

  // 副作用处理钩子 -- 挂载和更新两个阶段都会执行,执行N次
  // 要求
  //  + 它必须是静态方法
  //  + 它不能和一些过期的生命周期方法一起混用
  //  + 使用它一定义要有state状态属性
  //  + 它必须要return object / null
  //      + 如果它返回object,则它会和state中的属性进行合并 [属性存在则替换，属性不存在则添加]
  //      + 如果它返回null,则不对state进行任何处理
  // 注：它是一个静态方法，则在此方法中不能使用this
  // 形参
  //  + nextProps 父传给子的props数据
  //  + prevState 修改之前的state数据
  //  巧用此函数对props转为当前的state数据
  static getDerivedStateFromProps(nextProps, prevState) {
    // console.log(nextProps, prevState)
    // return null
    // return nextProps
    // 让props中的name和当前子组件中的name没有关联 -- 了解一下
    // return prevState.name ? null : nextProps

    console.log('Child -- getDerivedStateFromProps')
    return null
  }

  // 挂载完毕
  // 执行1次
  // 异步请求，获取dom都在此处完成
  componentDidMount() {
    console.log('Child -- componentDidMount')
  }

  render() {
    console.log('Child -- render')
    return (
      <div>
        {/* <input
          type="text"
          value={this.state.name}
          onChange={(e) => this.setState({ name: e.target.value })}
        /> */}
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    console.log('App -- constructor')
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('App -- getDerivedStateFromProps')
    return null
  }
  componentDidMount() {
    console.log('App -- componentDidMount')
  }

  render() {
    console.log('App -- render')
    return (
      <div>
        <Child name="张三" />
      </div>
    )
  }
}

export default App
